<template lang="pug">
    div
        template(v-if="targetWxUid !== wxuid")
            el-button(size="mini", :disabled="sending", @click.stop="follow",v-if="!isFollowing")
                i(class="el-icon-plus", v-if="!sending")
                i(class="el-icon-loading", v-else)
                span 关注
            el-button(size="mini", :disabled="sending", @click.stop="unfollow",type="danger",v-else)
                i(class="el-icon-minus", v-if="!sending")
                i(class="el-icon-loading", v-else)
                span 已关注
</template>

<script>
import axios from "@/plugins/axios";
import BaseVue from "@/mixins/BaseVue";

export default {
  name: "follow-btn",
  mixins: [BaseVue],
  data() {
    return {
      sending: false
    };
  },
  props: {
    /**
     * 明星微信id
     */
    "target-wx-uid": { type: String, default: null },
    /**
     * 是否已经关注
     */
    "is-following": { type: Boolean, default: false }
  },
  watch: {
      isFollowing(val){
          this.$emit('change', val);
      }
  },
  methods: {
    follow() {
      const options = {
        url: "forum/follow/follow",
        method: "post",
        data: { wxUID: this.targetWxUid }
      };
      this.sending = true;
      axios(options)
        .then(this.followSuccess)
        .catch(() => {
          this.sending = false;
        });
    },
    followSuccess() {
      this.$emit("update:isFollowing", true);
      this.sending = false;
    },
    unfollow() {
      const options = {
        url: "forum/follow/unfollow",
        method: "post",
        data: { wxUID: this.targetWxUid }
      };
      this.sending = true;
      axios(options)
        .then(this.unfollowSuccess)
        .catch(() => {
          this.sending = false;
        });
    },
    unfollowSuccess() {
      this.$emit("update:isFollowing", false);
      this.sending = false;
    }
  }
};
</script>

<style lang="less" scoped>
@import url("../../common/common.less");
</style>
